<!--高强度螺栓设计与校核-->
<template>
  <div class="sum">
    <button class="a" style="position: absolute; top: 0; width: 10%; height: 8%;" @click="select1">输入参数</button>
    <button class="btn_b" style="position: absolute; top: 0; width: 10%; height: 8%;" @click="select2">计算结果</button>
    <div v-show="strength_visible1" class="da">
      <div class="da_left">
        <div class="da_u3">
          <div class="da_u3_font">载荷参数</div>
        </div>
        <div class="da_left1">
          <ul style="height: 100%;width:100%;font-size: 100%">
            <li class="li_left1">是否输入螺栓/螺钉附加载荷</li>
            <li class="li_left1">最小轴向载荷(N)</li>
            <li class="li_left1">最大轴向载荷(N)</li>
            <li class="li_left1">要求夹紧载荷(N)</li>
            <li class="li_left1">最小横向载荷(N)</li>
            <li class="li_left1">最大横向载荷(N)</li>
            <li class="li_left1">最小扭矩(Nmm)</li>
            <li class="li_left1">最大扭矩(Nmm)</li>
            <li class="li_left1">最小弯矩(Nmm)</li>
            <li class="li_left1">最大弯矩(Nmm)</li>
            <li class="li_left1">密封内腔最大压力(MPa)</li>
            <li class="li_left1">传扭摩擦直径(mm)</li>
            <li class="li_left1">传递载荷接触面数目</li>
            <li class="li_left1">夹紧件间摩擦系数</li>
            <li class="li_left1">螺栓/螺钉数目</li>
            <li v-show="da_Parameter.Input_Bolt_Load == 1" class="li_left1">最小附加轴向载荷(N)</li>
            <li v-show="da_Parameter.Input_Bolt_Load == 1" class="li_left1">最大附加轴向载荷(N)</li>
            <li v-show="da_Parameter.Input_Bolt_Load == 1" class="li_left1">最小附加弯矩载荷(Nmm)</li>
            <li v-show="da_Parameter.Input_Bolt_Load == 1" class="li_left1">最大附加弯矩载荷(Nmm)</li>
          </ul>
        </div>
        <div class="da_left2">
          <ul style="width: 80%;height: 100%; margin-left: 5%;margin-right: 5%">
            <li style="height: 5%;width: 100%"><select v-model="da_Parameter.Input_Bolt_Load" style="width: 80%;height: 50%">
              <option value="0">计算附加载荷</option>
              <option value="1">输入附加载荷</option>
            </select></li>
            <li class="li_left1"><input v-model="da_Parameter.FA_min" class="li_left2"></li>
            <li class="li_left1"><input v-model="da_Parameter.FA_max" class="li_left2"></li>
            <li class="li_left1"><input v-model="da_Parameter.FRQ" class="li_left2"></li>
            <li class="li_left1"><input v-model="da_Parameter.FQ_min" class="li_left2"></li>
            <li class="li_left1"><input v-model="da_Parameter.FQ_max" class="li_left2"></li>
            <li class="li_left1" style="position: absolute"><button type="primary" @click="showModal_da(1)" style="position:absolute;right:5%;width:20%;height:80%">!</button></li>
            <li class="li_left1"><input v-model="da_Parameter.MY_min" class="li_left2">
<!--              <button type="primary" @click="showModal_da(1)" style="position:absolute;right:5%;width:20%;height:80%">!</button>-->
              <div style="height: 100%;width: 100%;">
                <a-modal v-model="da_img_visible" @ok="handleOk" @cancel="handleCancel" style="background-color:yellow;">
                  <p><label v-show="da_img == 1" class="img_style">按照国内齿轮行业惯例，中心距变大时内齿轮的变位系数为正，反之为负，但国际上的内齿轮变位系数的符号规定与之相反，所以标注时请引起注意！本程序使用国内惯例</label></p>
                  <p><img v-show="da_img == 2" src="@/assets/image/image_42_3.png" class="img_style"></p>
                  <p><img v-show="da_img == 3" src="@/assets/image/image_42_1.png" class="img_style"></p>
                  <p><img v-show="da_img == 4" src="@/assets/image/image_42_2.png" class="img_style"></p>
                  <p><img v-show="da_img == 5" src="@/assets/image/image_42_7.png" class="img_style"></p>
                  <p><img v-show="da_img == 6" src="@/assets/image/image_42_8.png" class="img_style"></p>
                  <p><img v-show="da_img == 7" src="@/assets/image/image_42_9.png" class="img_style"></p>
                  <p><img v-show="da_img == 8" src="@/assets/image/image_42_10.png" class="img_style"></p>
                  <p><img v-show="da_img == 9" src="@/assets/image/image_42_11.png" class="img_style"></p>
                  <p><img v-show="da_img == 10" src="@/assets/image/image_42_6.png" class="img_style"></p>
                  <p><img v-show="da_img == 11" src="@/assets/image/image_42_4.png" class="img_style"></p>
                  <p><img v-show="da_img == 12" src="@/assets/image/image_42_5.png" class="img_style"></p>
                  <div v-show="da_img == 13" style="height: 100%;width: 100%">螺栓公称直径
                    <div style="display:flex;width: 100%;height: 100%">
                      <ul style="height: 100%;width: 50%;text-align: center">
                        <li>螺栓强度等级</li>
                        <li>拧紧方法</li>
                        <li>是否动态载荷</li>
                        <li>是否偏心载荷</li>
                      </ul>
                      <ul style="height: 100%;width: 50%;">
                        <li style="width: 50%"><select style="width: 100%">
                          <option>12.9</option>
                          <option>10.9</option>
                          <option>8.8</option>
                        </select></li>
                        <li style="width: 50%"><select style="width: 100%">
                          <option>简单拧紧扳手</option>
                          <option>扭力扳手或通过动态扭矩测量、螺栓伸长量测量的精密扳手</option>
                          <option>角度控制或屈服控制</option>
                        </select></li>
                        <li style="width: 50%"><select style="width: 100%">
                          <option>是</option>
                          <option>否</option>
                        </select></li>
                        <li style="width: 50%"><select style="width: 100%">
                          <option>是</option>
                          <option>否</option>
                        </select></li>
                      </ul>
                    </div>
                  </div>
                </a-modal>
              </div>
            </li>
            <li class="li_left1"><input v-model="da_Parameter.MY_max" class="li_left2"></li>
            <li class="li_left1"><input v-model="da_Parameter.MB_min" class="li_left2"></li>
            <li class="li_left1"><input v-model="da_Parameter.MB_max" class="li_left2"></li>
            <li class="li_left1"><input v-model="da_Parameter.pi_max" class="li_left2"></li>
            <li class="li_left1"><input v-model="da_Parameter.d_a" class="li_left2"></li>
            <li class="li_left1"><input v-model="da_Parameter.q" class="li_left2"></li>
            <li class="li_left1" style="position: absolute"><button type="primary" @click="showModal_da(2)" style="position:absolute;right:5%;width:20%;height:80%">!</button></li>
            <li class="li_left1"><input v-model="da_Parameter.uT" class="li_left2">
<!--              <button type="primary" @click="showModal_da(2)" style="position:absolute;top:62%;right:5%;width:15%;height:3%">!</button>-->
            </li>
            <li class="li_left1"><input v-model="da_Parameter.n_bolt" class="li_left2"></li>
            <li class="li_left1"><input v-model="da_Parameter.FSA_min_1" v-show="da_Parameter.Input_Bolt_Load==1" class="li_left2"></li>
            <li class="li_left1"><input v-model="da_Parameter.FSA_max_1" v-show="da_Parameter.Input_Bolt_Load==1" class="li_left2"></li>
            <li class="li_left1"><input v-model="da_Parameter.MSb_min_1" v-show="da_Parameter.Input_Bolt_Load==1" class="li_left2"></li>
            <li class="li_left1"><input v-model="da_Parameter.MSb_max_1" v-show="da_Parameter.Input_Bolt_Load==1" class="li_left2"></li>
          </ul>
        </div>
      </div>
      <div class="da_center">
        <div class="da_u4">
          <div class="da_u4_font">螺栓/螺钉参数</div>
        </div>
        <div class="da_center_top">
          <div class="da_center_top1">
            <ul style="height: 80%;width: 100%">
              <li style="height: 20%;width: 100%"></li>
              <li style="height: 20%;width: 100%">支承面外径(mm)</li>
              <li style="height: 20%;width: 100%">小径(mm)</li>
              <li style="height: 20%;width: 100%">中径(mm)</li>
              <li style="height: 20%;width: 100%">支承面内径(mm)</li>
            </ul>
          </div>
          <div class="da_center_top2">
            <ul style="height: 80%;width: 100%">
              <li style="height: 20%;width: 100%">螺栓/螺钉</li>
              <li style="width: 100%;height: 20%"><input v-model="da_Parameter.dw" style="width: 80%;height: 80%"></li>
              <li style="width: 100%;height: 20%"><input v-model="da_Parameter.d3" style="width: 80%;height: 80%"></li>
              <li style="width: 100%;height: 20%"><input v-model="da_Parameter.d2" style="width: 80%;height: 80%"></li>
              <li style="width: 100%;height: 20%"><input v-model="da_Parameter.da	" style="width: 80%;height: 80%"></li>
            </ul>
          </div>
          <div class="da_center_top3">
            <ul style="height: 80%;width: 100%">
              <li style="height: 20%;width: 100%">螺母/内螺纹</li>
              <li style="width: 100%;height: 20%;position: relative"><input v-model="da_Parameter.s" v-show="da_Parameter.joint_type==1" style="width: 60%;height: 80%">
                <button @click="showModal_da(3)" style="width:20%;height:80%;position: absolute;top: 0%;left: 85%">!</button>
              </li>
              <li style="height: 20%;width: 100%"><input v-model="da_Parameter.D1" style="width: 60%;height: 80%"></li>
              <li style="height: 20%;width: 100%"><input v-model="da_Parameter.D2" style="width: 60%;height: 80%"></li>
              <li style="height: 20%;width: 100%;position: relative"><input v-model="da_Parameter.Da" v-show="da_Parameter.joint_type==1" style="width: 60%;height: 80%">
                <button @click="showModal_da(3)" style="position:absolute;top: 0%;left: 85%;width:20%;height:80%">!</button>
              </li>
            </ul>
          </div>
        </div>
        <div class="da_center_center">
          <ul style="width:100%;position: absolute;top:0;left: 30%">
            <li style="margin-left: 3%">连接类型</li>
            <li>螺栓头类型</li>
          </ul>
          <ul style="position: absolute;top:0;right: -40%;width: 80%">
            <li style="width: 100%">
              <select v-model="da_Parameter.joint_type" style="height: 80%;width: 30%">
                <option value="1">螺栓连接</option>
                <option value="2">螺钉连接</option>
              </select>
            </li>
            <li style="width: 100%">
              <select v-model="da_Parameter.bolt_type" style="height: 80%;width: 30%">
                <option value="1">外六角螺栓</option>
                <option value="2">内六角螺栓</option>
              </select>
            </li>
          </ul>
          <ul style="position: absolute;top: 22%;left: 10%;width: 40%"><li>螺栓/螺钉公称直径(mm)</li></ul>
          <ul style="position: absolute;top: 20%;left:45%;width: 30%;height: 15%"><input v-model="da_Parameter.d" style="width: 80%;height: 60%"></ul>
          <ul style="position: absolute;top: 20%;right: 10%;width: 20%;height: 15%">
            <button @click="showModal_da(13)" style="width: 100%;height: 60%">参考值</button>
          </ul>
          <ul style="position: absolute;top: 22%;right: 0;width:10%;text-align: center"><label>20</label></ul>
          <div class="da_center_center1">
            <ul style="text-align: right;width: 100%;height: 100%">
              <li style="height: 15%;width: 80%;margin-top: 5%">螺距(mm)</li>
              <li style="height: 15%;width: 80%">螺杆内径(mm)</li>
              <li style="height: 15%;width: 80%">自由螺纹长度(mm)</li>
              <li style="height: 15%;width: 80%">螺杆剪切面直径(mm)</li>
              <li style="height: 15%;width: 80%">螺杆最小直径(mm)</li>
              <li v-show="da_Parameter.Input_Bolt_Load == 0" style="height: 15%;width: 80%">载荷引入类型</li>
            </ul>
          </div>
          <div class="da_center_center2">
            <ul style="text-align: center;width: 100%;height: 100%">
              <li style="height: 15%;width: 80%;margin-top: 1%"><input v-model="da_Parameter.P" style="height: 80%;width: 60%"></li>
              <li style="height: 15%;width: 80%;margin-top: 1%"><input v-model="da_Parameter.db" style="height: 80%;width: 60%"></li>
              <li style="height: 15%;width: 80%;margin-top: 1%"><input v-model="da_Parameter.l_Gew" style="height: 80%;width: 60%">
                <button @click="showModal_da(3)" style="position: absolute;height: 12%;width: 14%;right: 5%;top: 32%">!</button>
              </li>
              <li style="height: 15%;width: 80%;margin-top: 1%"><input v-model="da_Parameter.dt" style="height: 80%;width: 60%"></li>
              <li style="height: 15%;width: 80%;margin-top: 1%"><input v-model="da_Parameter.d0" style="height: 80%;width: 60%">
                <button @click="showModal_da(3)" style="position: absolute;height: 12%;width: 14%;right: 5%;top: 64%">!</button>
              </li>
              <li style="height: 15%;width: 80%;margin-top: 1%"><input v-model="da_Parameter.SV" v-show="da_Parameter.Input_Bolt_Load == 0" style="height: 80%;width: 60%">
                <button v-show="da_Parameter.Input_Bolt_Load == 0" @click="showModal_da(4)" style="position: absolute;height: 12%;width: 14%;right: 5%;top: 80%">!</button>
              </li>
            </ul>
          </div>
        </div>
        <div class="da_center_bottom">
          <div class="da_u5">
            <div class="da_u5_font">螺杆段数</div>
          </div>
          <div class="da_center_bottom1">
            <ul style="width: 100%;height: 100%">
              <li style="width: 100%;height: 16.6%">螺杆段数</li>
              <li style="width: 100%;height: 16.6%">1</li>
              <li style="width: 100%;height: 16.6%">2</li>
              <li style="width: 100%;height: 16.6%">3</li>
              <li style="width: 100%;height: 16.6%">4</li>
            </ul>
          </div>
          <div class="da_center_bottom2">
            <ul style="width: 100%;height: 100%">
              <li style="width: 100%;height: 16.6%">长度(mm)</li>
              <li style="width: 100%;height: 16.6%"><input v-model="da_Parameter.a102" style="width: 72%"></li>
              <li style="width: 100%;height: 16.6%"><input v-model="da_Parameter.a103" style="width: 72%"></li>
              <li style="width: 100%;height: 16.6%"><input v-model="da_Parameter.a104" style="width: 72%"></li>
              <li style="width: 100%;height: 16.6%"><input v-model="da_Parameter.a105" style="width: 72%"></li>
            </ul>
          </div>
          <div class="da_center_bottom3">
            <ul style="width: 100%;height: 100%">
              <li style="width: 100%;height: 16.6%">直径(mm)</li>
              <li style="width: 100%;height: 16.6%"><input v-model="da_Parameter.a106" style="width: 72%;margin-right: 10%"></li>
              <li style="width: 100%;height: 16.6%"><input v-model="da_Parameter.a107" style="width: 72%;margin-right: 10%"></li>
              <li style="width: 100%;height: 16.6%"><input v-model="da_Parameter.a108" style="width: 72%;margin-right: 10%"></li>
              <li style="width: 100%;height: 16.6%"><input v-model="da_Parameter.a109" style="width: 72%;margin-right: 10%"></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="da_right">
        <div class="da_right_top">
          <div class="da_u6">
            <div class="da_u6_font">夹紧件参数</div>
          </div>
          <div class="da_right_top_left">
            <div class="da_right_top_left1">
              <ul style="height: 100%;width: 100%;font-size: 85%;position:absolute;right: 10%">
                <li style="height: 9%;width: 100%">夹紧件类型</li>
                <li style="height: 9%;width: 100%">夹紧件1厚度(mm)</li>
                <li style="height: 9%;width: 100%">夹紧件2厚度(mm)</li>
                <li style="height: 9%;width: 100%">垫片厚度(mm)</li>
                <li style="height: 9%;width: 100%">夹紧件孔径(mm)</li>
                <li style="height: 9%;width: 100%">夹紧件孔倒角直径(mm)</li>
                <li style="height: 9%;width: 100%">基本实体替代外径DA'(mm)</li>
                <li style="height: 9%;width: 100%"><span v-show="da_Parameter.Input_Bolt_Load == 0">连接实体长度(mm)</span></li>
                <li style="height: 9%;width: 100%"><span  v-show="da_Parameter.Input_Bolt_Load == 0">连接实体距离(mm)</span></li>
                <li style="height: 9%;width: 100%">夹紧件表面粗糙度Rz(um)</li>
                <li style="height: 9%;width: 100%">支承表面粗糙度Rz(um)</li>
              </ul>
            </div>
            <div class="da_right_top_left2">
              <ul style="height: 100%;width: 100%">
                <li style="height: 9%;width: 100%">
                  <select v-model="da_Parameter.clamp_type" style="height: 5%;width: 70%;position: absolute;top: 1%;right: 20%">
                    <option value="1">盘型夹紧件</option>
                    <option value="2">圆柱形夹紧件</option>
                    <option value="3">方形夹紧件</option>
                    <option value="4">圆环形夹紧件</option>
                  </select>
                  <button @click="showModal_da(5)" style="height: 5%;position: absolute;top:1%;left: 82%">!</button>
                </li>
                <li><input v-model="da_Parameter.h1" style="position: absolute ;top: 8%;right: 30%;width: 60%;height: 8%"></li>
                <li><input v-model="da_Parameter.h2" style="position: absolute ;top: 17%;right: 30%;width: 60%;height: 8%"></li>
                <li><input v-model="da_Parameter.hs" style="position: absolute ;top: 26%;right: 30%;width: 60%;height: 8%"></li>
                <li><input v-model="da_Parameter.dh" style="position: absolute ;top: 35%;right: 30%;width: 60%;height: 8%"></li>
                <li><input v-model="da_Parameter.dha" style="position: absolute ;top: 44%;right: 30%;width: 60%;height: 8%"></li>
                <li><input v-model="da_Parameter.D_A1" style="position: absolute ;top: 53%;right: 30%;width: 60%;height: 8%">
                  <button @click="showModal_da(6)" style="width: 20%;height: 8%;position: absolute;top:53%;left: 82%">!</button></li>
                <li><input v-model="da_Parameter.l_A" v-show="da_Parameter.Input_Bolt_Load == 0" style="position: absolute ;top: 62%;right: 30%;width: 60%;height: 8%">
                  <button v-show="da_Parameter.Input_Bolt_Load == 0" @click="showModal_da(7)" style="width: 20%;height: 8%;position: absolute;top:62%;left: 82%">!</button></li>
                <li><input v-model="da_Parameter.ak" v-show="da_Parameter.Input_Bolt_Load == 0" style="position: absolute ;top: 71%;right: 30%;width: 60%;height: 8%">
                  <button v-show="da_Parameter.Input_Bolt_Load == 0" @click="showModal_da(7)" style="width: 20%;height: 8%;position: absolute;top: 71%;left: 82%">!</button></li>
                <li><input v-model="da_Parameter.Rz_inter" style="position: absolute ;top: 80%;right: 30%;width: 60%;height: 8%"></li>
                <li><input v-model="da_Parameter.Rz_support" style="position: absolute ;top: 89%;right: 30%;width: 60%;height: 8%"></li>
              </ul>
            </div>
          </div>
          <div class="da_right_top_right">
            <div class="da_right_top_right1">
              <ul style="height: 100%;width: 100%;font-size: 85%;position:absolute;top:1%;right: 10%;text-align: right">
                <li style="height: 10%;width: 100%">夹紧件弹性模量(MPa)</li>
                <li style="height: 10%;width: 100%">夹紧件作用压应力(MPa)</li>
                <li v-show="da_Parameter.Input_Bolt_Load == 0" style="height: 10%;width: 100%">载荷引入距离(mm)</li>
                <li v-show="da_Parameter.Input_Bolt_Load == 0" style="height: 10%;width: 100%">螺栓/螺钉轴线偏心距(mm)</li>
                <li style="width: 150%;height: 10%">
                  <label v-show="db_ans.zz==1">与外载荷作用力FA_max作用相同侧发生分离</label>
                  <label v-show="db_ans.zz==2">与外载荷作用力FA_max作用对面侧发生分离</label>
                  <label v-show="db_ans.zz==3">与外载荷弯矩MB_max作用相同侧发生分离</label>
                  <label v-show="db_ans.zz==4">与最大附加轴向载荷作用相同侧发生分离</label>
                </li>
                <li v-show="da_Parameter.Input_Bolt_Load == 0" style="height: 10%;width: 100%">分离点边距(mm)</li>
                <li v-show="da_Parameter.clamp_type == 2||da_Parameter.clamp_type == 3||da_Parameter.clamp_type == 4" style="height: 10%;width: 100%">圆环外径(mm)</li>
                <li v-show="da_Parameter.clamp_type == 3||da_Parameter.clamp_type == 4" style="height: 10%;width: 100%">圆环内径(mm)</li>
                <li v-show="da_Parameter.clamp_type ==4" style="height: 10%;width: 100%">螺栓/螺钉分布圆直径(mm)</li>
                <li v-show="da_Parameter.clamp_type ==4" style="height: 10%;width: 100%">螺栓/螺钉间距(mm)</li>
              </ul>
            </div>
            <div class="da_right_top_right2">
              <ul style="width: 100%;height: 100%;text-align: center">
                <li style="height: 10%;width: 100%;position: absolute"><input v-model="da_Parameter.E_p" style="width: 60%;height: 80%;position:absolute;left:0"></li>
                <li style="height: 10%;width: 100%"></li>
                <li style="height: 10%;width: 100%;position: absolute"><input v-model="da_Parameter.pG" style="width: 60%;height: 80%;position:absolute;left:0">
                  <button @click="showModal_da(8)" style="width: 20%;height: 80%;position: absolute;right: 0">!</button></li>
                <li style="height: 10%;width: 100%"></li>
                <li style="height: 10%;width: 100%;position: absolute"><input v-model="da_Parameter.a" v-show="da_Parameter.Input_Bolt_Load == 0" style="width: 60%;height: 80%;position:absolute;left:0">
                  <button v-show="da_Parameter.Input_Bolt_Load == 0" @click="showModal_da(9)" style="width: 20%;height: 80%;position: absolute;right: 0">!</button></li>
                <li style="height: 10%;width: 100%"></li>
                <li style="height: 10%;width: 100%;position: absolute"><input v-model="da_Parameter.ssym" v-show="da_Parameter.Input_Bolt_Load == 0" style="width: 60%;height: 80%;position:absolute;left:0">
                  <button v-show="da_Parameter.Input_Bolt_Load == 0" @click="showModal_da(9)" style="width: 20%;height: 80%;position: absolute;right: 0">!</button></li>
                <li style="height: 10%;width: 100%"></li>
                <li style="height: 10%;width: 100%"></li>
                <li style="height: 10%;width: 100%;position: absolute"><input v-model="da_Parameter.u" v-show="da_Parameter.Input_Bolt_Load == 0" style="width: 60%;height: 80%;position:absolute;left:0">
                  <button v-show="da_Parameter.Input_Bolt_Load == 0" @click="showModal_da(9)" style="width: 20%;height: 80%;position: absolute;right: 0">!</button></li>
                <li style="height: 10%;width: 100%"></li>
                <li style="height: 10%;width: 100%;position: absolute"><input v-model="da_Parameter.doo" v-show="da_Parameter.clamp_type == 2||da_Parameter.clamp_type == 3||da_Parameter.clamp_type == 4" style="width: 60%;height: 80%;position:absolute;left:0"></li>
                <li style="height: 10%;width: 100%"></li>
                <li style="height: 10%;width: 100%;position: absolute"><input v-model="da_Parameter.di" v-show="da_Parameter.clamp_type == 3||da_Parameter.clamp_type == 4" style="width: 60%;height: 80%;position:absolute;left:0"></li>
                <li style="height: 10%;width: 100%"></li>
                <li style="height: 10%;width: 100%;position: absolute"><input v-model="da_Parameter.ds" v-show="da_Parameter.clamp_type ==4" style="width: 60%;height: 80%;position:absolute;left:0"></li>
                <li style="height: 10%;width: 100%"></li>
                <li style="height: 10%;width: 100%;position: absolute"><input v-model="da_Parameter.t" v-show="da_Parameter.clamp_type ==4" style="width: 60%;height: 80%;position:absolute;left:0"></li>
                <li style="height: 10%;width: 100%"></li>
              </ul>
            </div>
          </div>
        </div>
        <div class="da_right_center">
          <div class="da_u7">
            <div class="da_u7_font">其他参数</div>
          </div>
          <div class="da_right_center_left">
            <div class="da_right_center_left1">
              <ul style="width: 100%;height: 100%">
                <li style="height: 20%;width: 100%">拧紧系数</li>
                <li style="height: 20%;width: 100%">拧紧方式</li>
                <li style="height: 20%;width: 100%">螺栓/螺钉热处理类型</li>
                <li style="height: 20%;width: 100%">是否输入拧紧力矩</li>
              </ul>
            </div>
            <div class="da_right_center_left2">
              <ul style="width: 100%;height: 100%">
                <li style="height: 20%;width: 100%"><input v-model="da_Parameter.aA" style="position: absolute;top: 1%;left: 10%;width: 60%;height: 16%">
                  <button @click="showModal_da(10)" style="width: 20%;height: 16%;position: absolute;top: 1%;right: 0">!</button></li>
                <li style="height: 20%;width: 100%"><select v-model="da_Parameter.tightening_type" style="position: absolute;left: 10%;width: 70%;height: 16%">
                  <option value="1">扭矩控制拧紧</option>
                  <option value="2">角度或屈服控制拧紧</option>
                </select></li>
                <li style="height: 20%;width: 100%"><select v-model="da_Parameter.heat_treatment_type" style="position: absolute;left: 10%;width: 70%;height: 16%">
                  <option value="1">热处理前滚压</option>
                  <option value="2">热处理后滚压</option>
                </select></li>
                <li style="height: 20%;width: 100%"><select v-model="da_Parameter.Input_MA" style="position: absolute;left: 10%;width: 70%;height: 16%">
                  <option value="1">是</option>
                  <option value="2">否</option>
                </select></li>
              </ul>
            </div>
          </div>
          <div class="da_right_center_right">
            <div class="da_right_center_right1">
              <ul style="position: absolute;top: 0;width: 100%;height: 100%">
                <li style="position:absolute;top: 0;right: 10%">载荷循环次数</li>
                <li style="position:absolute;top: 18%;right: 10%">利用系数</li>
                <li style="position:absolute;top: 36%;right: 10%">螺纹副摩擦系数</li>
                <li style="position:absolute;top: 54%;right: 10%">支承面摩擦系数</li>
                <li style="position:absolute;top: 72%;right: 10%">拧紧力矩(Nmm)</li>
              </ul>
            </div>
            <div class="da_right_center_right2">
              <ul style="position: absolute;top: 0;width: 100%;height: 100%">
                <li><input v-model="da_Parameter.N" style="position: absolute;top: 1%;left: 12%;width: 64%;height: 14%"></li>
                <li><input v-model="da_Parameter.v" style="position: absolute;top: 18%;left: 12%;width: 64%;height: 14%"></li>
                <li><input v-model="da_Parameter.uG" style="position: absolute;top: 36%;left: 12%;width: 64%;height: 14%"></li>
                <li><input v-model="da_Parameter.uK" style="position: absolute;top: 54%;left: 12%;width: 64%;height: 14%"></li>
                <li><input v-model="da_Parameter.MA_input_1" style="position: absolute;top: 72%;left: 12%;width: 64%;height: 14%"></li>
              </ul>
            </div>
          </div>
        </div>
        <div class="da_right_bottom">
          <div class="da_u8">
            <div class="da_u8_font">材料参数</div>
          </div>
          <div class="da_right_bottom_left">
            <div class="da_right_bottom_left1">
              <ul style="height: 100%;width: 100%">
                <li style="width: 100%;height: 20%"></li>
                <li style="width: 100%;height: 20%">弹性模量(MPa)</li>
                <li style="width: 100%;height: 20%">屈服强度(MPa)</li>
                <li style="width: 100%;height: 20%">抗拉强度(MPa)</li>
                <li style="width: 100%;height: 20%">剪切强度(MPa)</li>
              </ul>
            </div>
            <div class="da_right_bottom_left2">
              <ul style="height: 100%;width: 100%">
                <li style="width: 80%;height: 20%">螺栓/螺钉</li>
                <li style="width: 100%;height: 20%"><input v-model="da_Parameter.E_s" style="width: 60%;height: 80%;margin-right: 5%"></li>
                <li style="width: 100%;height: 20%"><input v-model="da_Parameter.Rp" style="width: 60%;height: 80%;margin-right: 5%"></li>
                <li style="width: 100%;height: 20%"><input v-model="da_Parameter.RmS" style="width: 60%;height: 80%;margin-right: 5%"></li>
                <li style="width: 100%;height: 20%;position: relative"><input v-model="da_Parameter.tB" style="width: 60%;height: 80%;margin-right: 5%">
                  <button @click="showModal_da(11)" style="position: absolute;top:0%;left: 85%;height: 80%;width: 20%">!</button></li>
              </ul>
            </div>
            <div class="da_right_bottom_left3">
              <ul style="width: 100%;height: 100%">
                <li style="width: 80%;height: 20%">螺母/内螺纹</li>
                <li style="width: 100%;height: 20%"><input v-model="da_Parameter.E_M" v-show="da_Parameter.joint_type==1" style="width: 60%;height: 80%;margin-right: 5%"></li>
                <li style="width: 100%;height: 20%"></li>
                <li style="width: 100%;height: 20%"><input v-model="da_Parameter.RmM" style="width: 60%;height: 80%;margin-right: 5%"></li>
                <li style="width: 100%;height: 20%;position: relative"><input v-model="da_Parameter.tBM" style="width: 60%;height: 80%;margin-right: 5%">
                  <button @click="showModal_da(12)" style="position: absolute;top:0%;left: 85%;height: 80%;width: 20%">!</button>
                </li>
              </ul>
            </div>
          </div>
          <button @click="calculation" style="touch-action: manipulation; position: absolute;top: 60%;right: 5%;width: 15%;height: 15%">计算</button>
        </div>
      </div>
    </div>
    <div v-show="strength_visible2" class="db">
      <div class="db_all">
        <div class="db_u1">
          <div class="db_u1_font">输入参数</div>
        </div>
        <div class="db_left">
          <div class="db_left_top">
            <div class="db_u2">
              <div class="db_u2_font">载荷结果</div>
            </div>
            <div class="db_left_top_left">
              <div class="db_left_top_left1">
                <ul style="height: 100%;width: 100%">
                  <li style="width: 100%;height: 25%">螺栓/螺钉最小附加轴向力(N)</li>
                  <li style="width: 100%;height: 25%">螺栓/螺钉最大附加轴向力(N)</li>
                  <li style="width: 100%;height: 25%">螺栓/螺钉最小附加弯矩(Nmm)</li>
                  <li style="width: 100%;height: 25%">螺栓/螺钉最大附加弯矩(Nmm)</li>
                </ul>
              </div>
              <div class="db_left_top_left2">
                <ul style="height: 100%;width: 100%;text-align: center">
                  <li style="width: 100%;height: 25%"><label>{{db_ans.FSA_min}}</label></li>
                  <li style="width: 100%;height: 25%"><label>{{db_ans.FSA_max}}</label></li>
                  <li style="width: 100%;height: 25%"><label>{{db_ans.MSb_min}}</label></li>
                  <li style="width: 100%;height: 25%"><label>{{db_ans.MSb_max}}</label></li>
                </ul>
              </div>
            </div>
            <div class="db_left_top_right">
              <div class="db_left_top_right1">
                <ul style="height: 100%;width: 100%">
                  <li style="width: 100%;height: 25%">最大传递横向载荷夹紧力(N)</li>
                  <li style="width: 100%;height: 25%">分离极限所需夹紧力(N)</li>
                  <li style="width: 100%;height: 25%">要求夹紧载荷（N)</li>
                  <li style="width: 100%;height: 25%">预紧力改变量(N)</li>
                </ul>
              </div>
              <div class="db_left_top_right2">
                <ul style="height: 100%;width: 100%;text-align: center">
                  <li style="width: 100%;height: 25%"><label>{{db_ans.FKQ_max}}</label></li>
                  <li style="width: 100%;height: 25%"><label>{{db_ans.FKA}}</label></li>
                  <li style="width: 100%;height: 25%"><label>{{db_ans.FKerf}}</label></li>
                  <li style="width: 100%;height: 25%"><label>{{db_ans.FZ}}</label></li>
                </ul>
              </div>
            </div>
          </div>
          <div class="db_left_center">
            <div class="db_u3">
              <div class="db_u3_font">装配及预紧要求</div>
            </div>
            <div class="db_left_center_left">
              <div class="db_left_center_left1">
                <ul style="height: 100%;width: 100%">
                  <li style="width: 100%;height: 20%">要求最小预紧力(N)</li>
                  <li style="width: 100%;height: 20%">要求最大预紧力(N)</li>
                  <li style="width: 100%;height: 20%">螺栓/螺钉拧紧力矩(Nmm)</li>
                  <li style="width: 100%;height: 20%">许用装配预紧力(N)</li>
                  <li style="width: 100%;height: 20%">最小结合螺纹长度(mm)</li>
                </ul>
              </div>
              <div class="db_left_center_left2">
                <ul style="height: 100%;width: 100%;text-align: center">
                  <li style="width: 100%;height: 20%"><label>{{db_ans.FM_min}}</label></li>
                  <li style="width: 100%;height: 20%"><label>{{db_ans.FM_max}}</label></li>
                  <li style="width: 100%;height: 20%"><label>{{db_ans.MA}}</label></li>
                  <li style="width: 100%;height: 20%"><label>{{db_ans.FM_zul}}</label></li>
                  <li style="width: 100%;height: 20%"><label>{{db_ans.meff_min}}</label></li>
                </ul>
              </div>
            </div>
            <div class="db_left_center_right">
              <div class="db_left_center_right1">
                <ul style="height: 100%;width: 100%">
                  <li style="width: 100%;height: 20%">实际装配利用率</li>
                  <li style="width: 100%;height: 20%">实际装配最大预紧力(N)</li>
                  <li style="width: 100%;height: 20%">实际装配最小预紧力(N)</li>
                  <li style="width: 100%;height: 20%">工作状态最大预紧力(N)</li>
                  <li style="width: 100%;height: 20%">工作状态最小预紧力(N)</li>
                </ul>
              </div>
              <div class="db_left_center_right2">
                <ul style="height: 100%;width: 100%;text-align: center">
                  <li style="width: 100%;height: 20%"><label>{{db_ans.v_zul}}</label></li>
                  <li style="width: 100%;height: 20%"><label>{{db_ans.FM_input}}</label></li>
                  <li style="width: 100%;height: 20%"><label>{{db_ans.FM_input_min}}</label></li>
                  <li style="width: 100%;height: 20%"><label>{{db_ans.FM_work}}</label></li>
                  <li style="width: 100%;height: 20%"><label>{{db_ans.FM_work_min}}</label></li>
                </ul>
              </div>
            </div>
          </div>
          <div class="db_left_bottom">
            <div class="db_u4">
              <div class="db_u4_font">应力及安全系数</div>
            </div>
            <div class="db_left_bottom_left">
              <div class="db_left_bottom_left1">
                <ul style="height: 100%;width: 100%">
                  <li style="width: 100%;height: 12.5%">工作最大应力(MPa)</li>
                  <li style="width: 100%;height: 12.5%">工作屈服安全系数</li>
                  <li style="width: 100%;height: 12.5%">工作压应力(MPa)</li>
                  <li style="width: 100%;height: 12.5%">工作压应力安全系数</li>
                  <li style="width: 100%;height: 12.5%">装配压应力(MPa)</li>
                  <li style="width: 100%;height: 12.5%">装配压应力安全系数</li>
                  <li style="width: 100%;height: 12.5%">螺栓/螺钉最大剪切应力(MPa)</li>
                  <li style="width: 100%;height: 12.5%">剪切安全系数</li>
                </ul>
              </div>
              <div class="db_left_bottom_left2">
                <ul style="height: 100%;width: 100%;text-align: center">
                  <li style="width: 100%;height: 12.5%"><label>{{db_ans.stress_redB}}</label></li>
                  <li style="width: 100%;height: 12.5%"><label>{{db_ans.SF}}</label></li>
                  <li style="width: 100%;height: 12.5%"><label>{{db_ans.pB_max}}</label></li>
                  <li style="width: 100%;height: 12.5%"><label>{{db_ans.Sp2}}</label></li>
                  <li style="width: 100%;height: 12.5%"><label>{{db_ans.p_max}}</label></li>
                  <li style="width: 100%;height: 12.5%"><label>{{db_ans.Sp1}}</label></li>
                  <li style="width: 100%;height: 12.5%"><label>{{db_ans.tQ_max}}</label></li>
                  <li style="width: 100%;height: 12.5%"><label>{{db_ans.SA}}</label></li>
                </ul>
              </div>
            </div>
            <div class="db_left_bottom_right">
              <div class="db_left_bottom_right1">
                <ul style="height: 100%;width: 100%">
                  <li style="width: 100%;height: 12.5%">最小螺栓/螺钉应力(MPa)</li>
                  <li style="width: 100%;height: 12.5%">最大螺栓/螺钉应力(MPa)</li>
                  <li style="width: 100%;height: 12.5%">工作交变力(MPa)</li>
                  <li style="width: 100%;height: 12.5%">疲劳安全系数</li>
                  <li style="width: 100%;height: 12.5%">交变剪切应力(MPa)</li>
                  <li style="width: 100%;height: 12.5%">交变剪切安全系数</li>
                  <li style="width: 100%;height: 12.5%">最小残余夹紧载荷</li>
                  <li style="width: 100%;height: 12.5%">打滑安全系数</li>
                </ul>
              </div>
              <div class="db_left_bottom_right2">
                <ul style="height: 100%;width: 100%;text-align: center">
                  <li style="width: 100%;height: 12.5%"><label>{{db_ans.stress_SAb_min}}</label></li>
                  <li style="width: 100%;height: 12.5%"><label>{{db_ans.stress_SAb_max}}</label></li>
                  <li style="width: 100%;height: 12.5%"><label>{{db_ans.stress_a}}</label></li>
                  <li style="width: 100%;height: 12.5%"><label>{{db_ans.SD}}</label></li>
                  <li style="width: 100%;height: 12.5%"><label>{{db_ans.ta}}</label></li>
                  <li style="width: 100%;height: 12.5%"><label>{{db_ans.St}}</label></li>
                  <li style="width: 100%;height: 12.5%"><label>{{db_ans.FKR_min}}</label></li>
                  <li style="width: 100%;height: 12.5%"><label>{{db_ans.SG}}</label></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div class="db_right">
          <div class="db_u5">
            <div class="db_u5_font">其他</div>
          </div>
          <div class="db_right1">
            <ul style="height: 100%;width: 100%">
              <li style="width: 100%;height: 10%">结合面极限尺寸(mm)</li>
              <li style="width: 100%;height: 10%">变形锥最大外径(mm)</li>
              <li style="width: 100%;height: 10%">载荷引入系数</li>
              <li style="width: 100%;height: 10%">螺栓/螺钉轴向柔度(mm/N)</li>
              <li style="width: 100%;height: 10%">夹紧件轴向柔度(mm/N)</li>
              <li style="width: 100%;height: 10%">螺栓/螺钉弯曲柔度(rad/Nmm)</li>
              <li style="width: 100%;height: 10%">夹紧件弯曲柔度(rad/Nmm)</li>
              <li style="width: 100%;height: 10%">载荷系数</li>
              <li style="width: 100%;height: 10%">接触面压紧量(um)</li>
              <li style="width: 100%;height: 10%">压应力面积(mm2)</li>
            </ul>
          </div>
          <div class="db_right2">
            <ul style="height: 100%;width: 100%;text-align: center">
              <li style="width: 100%;height: 10%"><label>{{db_ans.G}}</label></li>
              <li style="width: 100%;height: 10%"><label>{{db_ans.D_AGr}}</label></li>
              <li style="width: 100%;height: 10%"><label>{{db_ans.n}}</label></li>
              <li style="width: 100%;height: 10%"><label>{{db_ans.delta_s}}</label></li>
              <li style="width: 100%;height: 10%"><label>{{db_ans.delta_P}}</label></li>
              <li style="width: 100%;height: 10%"><label>{{db_ans.beta_s}}</label></li>
              <li style="width: 100%;height: 10%"><label>{{db_ans.beta_P}}</label></li>
              <li style="width: 100%;height: 10%"><label>{{db_ans.eta}}</label></li>
              <li style="width: 100%;height: 10%"><label>{{db_ans.f_Z}}</label></li>
              <li style="width: 100%;height: 10%"><label>{{db_ans.Apmin}}</label></li>
            </ul>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>


import {bs} from "@/api/file";

export default {
  created() {
    document.title = '高强度螺栓设计与校核'
    this.$store.state.file.key = 42;

  },
  name: "namebolt_strength",
  data(){
    return {
      strength_visible1: true,
      strength_visible2: false,
      da_img_visible:false,
      da_img:1,
      da_Parameter:{
        FA_min:0,
        FA_max:16378.9482,
        FRQ:0,
        FQ_min:0,
        FQ_max:0,
        pi_max:0,
        MY_min:0,
        MY_max:0,
        MB_min:0,
        MB_max:0,
        d_a:400,
        q:1,
        uT:0.15,
        n_bolt:10,
        Input_Bolt_Load:0,
        FSA_min_1:0,
        FSA_max_1:21.9631,
        MSb_min_1:0,
        MSb_max_1:534.87,
        aA:1.7,
        joint_type:1,
        clamp_type:1,
        dw:28.19,
        h1:25,
        h2:23,
        dh:17.5,
        a:40,
        ssym:5,
        u:55,
        bolt_sect_n:4,
        d:20,
        db:0,
        d3:17.294,
        P:2.5,
        bolt_type:1,
        E_s:206000,
        E_M:206000,
        E_p:206000,
        l_Gew:0,
        s:28.19,
        D_A1:346.9137,
        l_A:15,
        ak:5,
        SV:4,
        Rz_support:19.2,
        Rz_inter:19.2,
        d0:17.835,
        v:0.8,
        Rp:640,
        d2:18.376,
        Da:22.4,
        dha:18.5,
        da:22.4,
        hs:2.5,
        tightening_type:1,
        N:2000000,
        heat_treatment_type:1,
        pG:710,
        D1:17.294,
        D2:18.376,
        RmM:800,
        RmS:800,
        tBM:640,
        dt:20,
        tB:640,
        uG:0.12,
        uK:0.12,
        bT:460,
        cT:360,
        ds:400,
        t:125.6637,
        MA_input_1:350000,
        Input_MA:1,
        length_v:0,
        diameter_v:0,
        D_A:346.9137,
        doo:460,
        di:360,
        a102:48,
        a103:0,
        a104:0,
        a105:0,
        a106:20,
        a107:0,
        a108:0,
        a109:0,
      },
      db_ans:{
        MSb_min:'Static Text',
        MSb_max:'Static Text',
        FM_input:'Static Text',
        FM_input_min:'Static Text',
        v_zul:'Static Text',
        FM_work:'Static Text',
        FM_work_min:'Static Text',
        G:'Static Text',
        D_AGr:'Static Text',
        n:'Static Text',
        delta_s:'Static Text',
        delta_P:'Static Text',
        beta_s:'Static Text',
        beta_P:'Static Text',
        eta:'Static Text',
        FSA_max:'Static Text',
        FSA_min:'Static Text',
        f_Z:'Static Text',
        FZ:'Static Text',
        FKQ_max:'Static Text',
        FKA:'Static Text',
        FKerf:'Static Text',
        FM_min:'Static Text',
        FM_max:'Static Text',
        FM_zul:'Static Text',
        stress_redB:'Static Text',
        SF:'Static Text',
        stress_SAb_max:'Static Text',
        stress_SAb_min:'Static Text',
        stress_a:'Static Text',
        SD:'Static Text',
        pM_max:'Static Text',
        pB_max:'Static Text',
        p_max:'Static Text',
        Apmin:'Static Text',
        Sp1:'Static Text',
        Sp2:'Static Text',
        Sp3:'Static Text',
        meff_min:'Static Text',
        FKR_min:'Static Text',
        SG:'Static Text',
        tQ_max:'Static Text',
        SA:'Static Text',
        ta:'Static Text',
        St:'Static Text',
        MA:'Static Text',
        zz:'',
      }
    }
  },
  methods:{
    select1(){
      this.strength_visible1 = true;
      this.strength_visible2 = false;
    },
    select2(){
      this.strength_visible1 = false;
      this.strength_visible2 = true;
    },
    showModal_da(a) {
      if(a === 1){
        this.da_img = 1;
      }else if(a === 2){
        this.da_img = 2;
      }else if(a === 3){
        this.da_img = 3;
      }else if(a === 4){
        this.da_img = 4;
      }else if(a === 5){
        this.da_img = 5;
      }else if(a === 6){
        this.da_img = 6;
      }else if(a === 7){
        this.da_img = 7;
      }else if(a === 8){
        this.da_img = 8;
      }else if(a === 9){
        this.da_img = 9;
      }else if(a === 10){
        this.da_img = 10;
      }else if(a === 11){
        this.da_img = 11;
      }else if(a === 12){
        this.da_img = 12;
      }else if(a === 13){
        this.da_img = 13;
      }
      this.da_img_visible = true;
    },
    handleOk() {
      this.da_img_visible = false;
    },
    handleCancel() {
      this.da_img_visible = false;
    },

    calculation() {
      bs(this.da_Parameter).then(res => {
        console.log(res);
        // if (res.code === 200) {
        //   console.log(res.data);
        //   this.db_ans = res.data;
        // }
        this.db_ans.MSb_min=res[0];
        this.db_ans.MSb_max=res[1];
        this.db_ans.FM_input=res[2];
        this.db_ans.FM_input_min=res[3];
        this.db_ans.v_zul=res[4];
        this.db_ans.FM_work=res[5];
        this.db_ans.FM_work_min=res[6];
        this.db_ans.G=res[7];
        this.db_ans.D_AGr=res[8];
        this.db_ans.n=res[9];
        this.db_ans.delta_s=res[10];
        this.db_ans.delta_P=res[11];
        this.db_ans.beta_s=res[12];
        this.db_ans.beta_P=res[13];
        this.db_ans.eta=res[14];
        this.db_ans.FSA_max=res[15];
        this.db_ans.FSA_min=res[16];
        this.db_ans.f_Z=res[17];
        this.db_ans.FZ=res[18];
        this.db_ans.FKQ_max=res[19];
        this.db_ans.FKA=res[20];
        this.db_ans.FKerf=res[21];
        this.db_ans.FM_min=res[22];
        this.db_ans.FM_max=res[23];
        this.db_ans.FM_zul=res[24];
        this.db_ans.stress_redB=res[25];
        this.db_ans.SF=res[26];
        this.db_ans.stress_SAb_max=res[27];
        this.db_ans.stress_SAb_min=res[28];
        this.db_ans.stress_a=res[29];
        this.db_ans.SD=res[30];
        this.db_ans.pM_max=res[31];
        this.db_ans.pB_max=res[32];
        this.db_ans.p_max=res[33];
        this.db_ans.Apmin=res[34];
        this.db_ans.Sp1=res[35];
        this.db_ans.Sp2=res[36];
        this.db_ans.Sp3=res[37];
        this.db_ans.meff_min=res[38];
        this.db_ans.FKR_min=res[39];
        this.db_ans.SG=res[40];
        this.db_ans.tQ_max=res[41];
        this.db_ans.SA=res[42];
        this.db_ans.ta=res[43];
        this.db_ans.St=res[44];
        this.db_ans.MA=res[45];
        this.db_ans.zz=res[46];

      })
          .catch(error => {
            console.log(error);
          });
    }
  }
}




</script>

<style scoped>

button:hover {
  background-color: rgb(118, 118, 118);
}
input {
  text-align: center;
}
label {
  text-align: center;
}
.img_style {
  width: 80%;
  height: 80%;
  margin: 10% 10%;
}
.sum {
  overflow: auto;
  width: 100%;
  height: 120%;
  font-size: 16px;
  position:relative;
}

.da {
  position: absolute;
  left: 0;
  top: 8%;
  background-color: white;
  width: 100%;
  height: 100%;
}
button{
  display: block;
  /*position: absolute;*/
  /*top: 0;*/
  /*width: 10%;*/
  /*height: 8%;*/
  margin-right: 0.1%;
  border-radius: 2px;
  color: rgb(51,51,51);
  background-color: rgb(240,240,240);
  border: 1px solid rgb(179,179,179);
  outline: none;
  line-height: 1.2;
  font-size: 13px;
}
.btn_b {
  margin-left: 10.1%;
}
.da_left {
  position: absolute;
  left: 1%;
  width: 24%;
  height: 150%;
  box-shadow: 1.5px 1.5px 2px #aaaaaa;
  border: 0.5px solid rgba(231, 231, 231, 0.486);
  border-radius: 3px;
}
.li_left1 {
  width: 100%;
  height: 5%;
}
.li_left2 {
  height: 80%;
  width: 80%;
}
.da_left1 {
  position: absolute;
  top: 5%;
  left: 0;
  width: 50%;
  height: 100%;
  text-align: right;
  font-size: 85%;
}
.da_left2 {
  position: absolute;
  top: 5%;
  right: 0;
  width: 50%;
  height: 100%;
  text-align: center;
}
.da_u3 {
  border-width: 0px;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 3.5%;
  background: inherit;
  background-color: rgba(238, 238, 238, 1);
  border: none;
  border-radius: 2px;
  box-shadow: none;
  font-size: 16px;
  text-align: left;
}
.da_u3_font {
  position: absolute;
  left: 2%;
  word-wrap: break-word;
  text-transform: none;
}
.da_center {
  position: absolute;
  left: 26%;
  width: 28%;
  height: 150%;
  font-size: 80%;
  box-shadow: 1.5px 1.5px 2px #aaaaaa;
  border: 0.5px solid rgba(231, 231, 231, 0.486);
  border-radius: 3px;
}
.da_u4 {
  border-width: 0px;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 3.5%;
  background: inherit;
  background-color: rgba(238, 238, 238, 1);
  border: none;
  border-radius: 2px;
  box-shadow: none;
  font-size: 16px;
  text-align: left;
}
.da_u4_font {
  position: absolute;
  left: 2%;
  word-wrap: break-word;
  text-transform: none;
}
.da_center_top {
  position: absolute;
  top: 5%;
  width: 100%;
  height: 30%;
  background-color: #fff;
}
.da_center_top1 {
  position: absolute;
  width: 30%;
  height: 100%;
  text-align: right;
}
.da_center_top2 {
  position: absolute;
  left: 30%;
  width: 30%;
  height: 100%;
  text-align: center;
}
.da_center_top3 {
  position: absolute;
  left: 60%;
  width: 30%;
  height: 100%;
  text-align: center;
}
.da_center_center {
  position: absolute;
  top: 30%;
  width: 100%;
  height: 40%;
}
.da_center_center1 {
  position: absolute;
  top: 30%;
  left: 0;
  width: 50%;
  height: 70%;
}
.da_center_center2 {
  position: absolute;
  top: 30%;
  left: 50%;
  width: 50%;
  height: 70%;
}
.da_center_bottom {
  position: absolute;
  left: 1%;
  right: 1%;
  bottom: 2%;
  width: 98%;
  height: 30%;
  box-shadow: 1.5px 1.5px 2px #aaaaaa;
  border: 0.5px solid rgba(231, 231, 231, 0.486);
  border-radius: 3px;
}
.da_u5 {
  border-width: 0px;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 10%;
  background: inherit;
  background-color: rgba(238, 238, 238, 1);
  border: none;
  border-radius: 0px;
  box-shadow: none;
  font-size: 16px;
  text-align: left;
}
.da_u5_font {
  position: absolute;
  left: 2%;
  word-wrap: break-word;
  text-transform: none;
}
.da_center_bottom1 {
  position: absolute;
  top: 20%;
  left: 0;
  width: 34%;
  height: 100%;
  text-align: center;
}
.da_center_bottom2 {
  position: absolute;
  top: 20%;
  left: 34%;
  width: 33%;
  height: 98%;
  text-align: center;
}
.da_center_bottom3 {
  position: absolute;
  top: 20%;
  right: 0;
  width: 33%;
  height: 98%;
  text-align: center;
}
.da_right {
  position: absolute;
  right: 0;
  width: 45.5%;
  height: 150%;
}
.da_right_top {
  position: absolute;
  top: 0;
  left: 1%;
  right: 1%;
  bottom: 2%;
  width: 98%;
  height: 50%;
  box-shadow: 1.5px 1.5px 2px #aaaaaa;
  border: 0.5px solid rgba(231, 231, 231, 0.486);
  border-radius: 3px;
}
.da_u6 {
  border-width: 0px;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 6.8%;
  background: inherit;
  background-color: rgba(238, 238, 238, 1);
  border: none;
  border-radius: 2px;
  box-shadow: none;
  font-size: 16px;
  text-align: left;
}
.da_u6_font {
  position: absolute;
  left: 2%;
  white-space: nowrap;
  text-transform: none;
}
.da_right_top_left {
  position: absolute;
  top: 6.8%;
  left: 0;
  height: 93.2%;
  width: 50%;
}
.da_right_top_left1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  text-align: right;
}
.da_right_top_left2 {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  text-align: center;
}
.da_right_top_right {
  position: absolute;
  top: 6.8%;
  right: 0;
  height: 93.2%;
  width: 50%;
}
.da_right_top_right1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 60%;
  height: 100%;
}
.da_right_top_right2 {
  position: absolute;
  top: 0;
  right: 0;
  width: 40%;
  height: 100%;
}
.da_right_center {
  position: absolute;
  top: 52%;
  left: 1%;
  right: 1%;
  bottom: 2%;
  width: 98%;
  height: 23%;
  box-shadow: 1.5px 1.5px 2px #aaaaaa;
  border: 0.5px solid rgba(231, 231, 231, 0.486);
  border-radius: 3px;
}
.da_u7 {
  border-width: 0px;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 12%;
  background: inherit;
  background-color: rgba(238, 238, 238, 1);
  border: none;
  border-radius: 2px;
  box-shadow: none;
  text-align: left;
}
.da_u7_font {
  position: absolute;
  left: 2%;
  white-space: nowrap;
  text-transform: none;
}
.da_right_center_left {
  position: absolute;
  top: 12%;
  left: 0;
  height: 100%;
  width: 50%;
}
.da_right_center_left1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  text-align: right;
  font-size: 85%;
}
.da_right_center_left2 {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  text-align: center;
}
.da_right_center_right {
  position: absolute;
  top: 12%;
  right: 0;
  height: 100%;
  width: 50%;
}
.da_right_center_right1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 60%;
  height: 100%;
  font-size: 85%;
}
.da_right_center_right2 {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  text-align: center;
}
.da_right_bottom {
  position: absolute;
  top: 77%;
  left: 1%;
  right: 1%;
  width: 98%;
  height: 23%;
  box-shadow: 1.5px 1.5px 2px #aaaaaa;
  border: 0.5px solid rgba(231, 231, 231, 0.486);
  border-radius: 3px;
}
.da_u8 {
  border-width: 0px;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 12%;
  background: inherit;
  background-color: rgba(238, 238, 238, 1);
  border: none;
  border-radius: 2px;
  box-shadow: none;
  text-align: left;
}
.da_u8_font {
  position: absolute;
  left: 2%;
  white-space: nowrap;
  text-transform: none;
}
.da_right_bottom_left {
  position: absolute;
  top: 12%;
  height: 88%;
  width: 80%;
}
.da_right_bottom_left1 {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 28%;
  text-align: right;
  font-size: 85%;
}
.da_right_bottom_left2 {
  position: absolute;
  top: 0;
  left: 33%;
  height: 100%;
  width: 33%;
  text-align: center;
}
.da_right_bottom_left3 {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 34%;
  text-align: center;
}

.db {
  position: absolute;
  left: 0;
  top: 8%;
  background-color: white;
  width: 100%;
  height: 150%;
  font-size: 14px;
}
.db_all {
  position: absolute;
  top: 0;
  left: 2%;
  right: 2%;
  height: 100%;
  width: 96%;

  background: inherit;
  background-color: rgba(255, 255, 255, 1);
  box-shadow: 1.5px 1.5px 2px #aaaaaa;
  border: 0.5px solid rgba(231, 231, 231, 0.486);
  border-radius: 3px;
}
.db_u1 {
  border-width: 0px;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 3.5%;
  background: inherit;
  background-color: rgba(242, 242, 242, 1);
  border: none;
  border-radius: 5px;
  box-shadow: none;
  font-size: 16px;
}
.db_u1_font {
  position: absolute;
  left: 2%;
}
.db_left {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
}
.db_left_top {
  position: absolute;
  top: 4.5%;
  left: 1%;
  right: 1%;
  height: 23%;
  width: 100%;

  background: inherit;
  background-color: rgba(255, 255, 255, 1);
  box-shadow: 1.5px 1.5px 2px #aaaaaa;
  border: 0.5px solid rgba(231, 231, 231, 0.486);
  border-radius: 3px;
}
.db_u2 {
  border-width: 0px;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 12%;
  background: inherit;
  background-color: rgba(242, 242, 242, 1);
  border: none;
  border-radius: 5px;
  box-shadow: none;
  font-size: 16px;
}
.db_u2_font {
  position: absolute;
  left: 2%;
}
.db_left_top_left {
  position: absolute;
  top: 12%;
  left: 0;
  height: 100%;
  width: 50%;
}
.db_left_top_left1 {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 60%;
  text-align: right;
}
.db_left_top_left2 {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 40%;
}
.db_left_top_right {
  position: absolute;
  top: 12%;
  right: 0;
  height: 100%;
  width: 50%;
}
.db_left_top_right1 {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 60%;
  text-align: right;
}
.db_left_top_right2 {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 40%;
}
.db_left_center {
  position: absolute;
  top: 29%;
  left: 1%;
  right: 1%;
  height: 29%;
  width: 100%;

  background: inherit;
  background-color: rgba(255, 255, 255, 1);
  box-shadow: 1.5px 1.5px 2px #aaaaaa;
  border: 0.5px solid rgba(231, 231, 231, 0.486);
  border-radius: 3px;
}
.db_u3 {
  border-width: 0px;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 8%;
  background: inherit;
  background-color: rgba(242, 242, 242, 1);
  border: none;
  border-radius: 5px;
  box-shadow: none;
  font-size: 16px;
}
.db_u3_font {
  position: absolute;
  left: 2%;
}
.db_left_center_left {
  position: absolute;
  top: 8%;
  left: 0;
  width: 50%;
  height: 100%;
}
.db_left_center_left1 {
  position: absolute;
  top: 1%;
  left: 0;
  width: 60%;
  height: 100%;
  text-align: right;
}
.db_left_center_left2 {
  position: absolute;
  top: 1%;
  right: 0;
  width: 40%;
  height: 100%;
  text-align: center;
}
.db_left_center_right {
  position: absolute;
  top: 8%;
  right: 0;
  width: 50%;
  height: 100%;
}
.db_left_center_right1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 60%;
  height: 100%;
  text-align: right;
}
.db_left_center_right2 {
  position: absolute;
  top: 0;
  right: 0;
  width: 40%;
  height: 100%;
  text-align: center;
}
.db_left_bottom {
  position: absolute;
  top: 59%;
  left: 1%;
  right: 1%;
  height: 40%;
  width: 100%;

  background: inherit;
  background-color: rgba(255, 255, 255, 1);
  box-shadow: 1.5px 1.5px 2px #aaaaaa;
  border: 0.5px solid rgba(231, 231, 231, 0.486);
  border-radius: 3px;
}
.db_u4 {
  border-width: 0px;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 8%;
  background: inherit;
  background-color: rgba(242, 242, 242, 1);
  border: none;
  border-radius: 5px;
  box-shadow: none;
  font-size: 16px;
}
.db_u4_font {
  position: absolute;
  left: 2%;
}
.db_left_bottom_left {
  position: absolute;
  top: 8%;
  left: 0;
  width: 50%;
  height: 100%;

}

.db_left_bottom_left1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 60%;
  height: 100%;
  text-align: right;
}
.db_left_bottom_left2 {
  position: absolute;
  top: 0;
  right: 0;
  width: 40%;
  height: 100%;
}
.db_left_bottom_right {
  position: absolute;
  top: 8%;
  right: 0;
  width: 50%;
  height: 100%;
}
.db_left_bottom_right1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 60%;
  height: 100%;
  text-align: right;
}
.db_left_bottom_right2 {
  position: absolute;
  top: 0;
  right: 0;
  width: 40%;
  height: 100%;
}
.db_right {
  position: absolute;
  top: 4.5%;
  left: 52%;
  width: 30%;
  height: 52%;

  background: inherit;
  background-color: rgba(255, 255, 255, 1);
  box-shadow: 1.5px 1.5px 2px #aaaaaa;
  border: 0.5px solid rgba(231, 231, 231, 0.486);
  border-radius: 3px;
}
.db_u5 {
  border-width: 0px;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 6%;
  background: inherit;
  background-color: rgba(242, 242, 242, 1);
  border: none;
  border-radius: 5px;
  box-shadow: none;
  font-size: 16px;
}
.db_u5_font {
  position: absolute;
  left: 2%;
}
.db_right1 {
  position: absolute;
  top: 6%;
  left: 0;
  width: 60%;
  height: 100%;
  text-align: right;
}
.db_right2 {
  position: absolute;
  top: 6%;
  right: 0;
  width: 40%;
  height: 100%;
}
</style>